<template>
  <div class="equip-wrap-common">
    <px-form ref="formRef" class="custom-form-ui equip-form" :model="form" label-position="right" label-width="120px">
      <px-row :gutter="16">
        <px-col :span="6">
          <px-form-item label="科室" prop="className">
            <px-select v-model="form.className" placeholder="请选择科室" filterable>
              <px-option v-for="item in classNameList" :key="item.code" :label="item.name" :value="item.code" />
            </px-select>
          </px-form-item>
        </px-col>
        <px-col :span="6">
          <px-form-item label="规则类型" prop="ruleTypeName">
            <px-input v-model="form.ruleTypeName" placeholder="规则类型" clearable />
          </px-form-item>
        </px-col>
        <px-col :span="6">
          <px-button type="primary" @click="getList">查询</px-button>
          <px-button @click="handleReset">重置</px-button>
        </px-col>
      </px-row>
    </px-form>
    <px-button v-has="'SYSTEM_BASE_RULE_ADD_RULE_DESC'" type="primary" @click="handleAddRule">新增规则</px-button>
    <px-table :data="tableData" class="mt-[8px]" size="small" height="calc(100vh - 380px)" border>
      <px-table-column label="序号" width="100" align="center" fixed="left">
        <template #default="{ $index }">
          {{ $index + 1 + (paginationInfo.pageNum - 1) * paginationInfo.pageSize }}
        </template>
      </px-table-column>
      <px-table-column prop="classNameDesc" label="科室" show-overflow-tooltip />
      <px-table-column prop="ruleTypeName" label="规则类型" show-overflow-tooltip />
      <px-table-column prop="ruleExplain" label="规则内容" show-overflow-tooltip />
      <px-table-column prop="updateName" label="更新人" show-overflow-tooltip />
      <px-table-column prop="updateTime" label="更新时间" show-overflow-tooltip />
      <px-table-column fixed="right" label="操作" width="200" align="center">
        <template #default="scope">
          <px-tooltip content="详情" placement="top">
            <px-button v-has="'SYSTEM_BASE_RULE_VIEW_RULE_DESC'" link type="primary" icon="Tickets" @click="handleDetail(scope.row)" />
          </px-tooltip>
          <px-tooltip content="编辑" placement="top">
            <px-button v-has="'SYSTEM_BASE_RULE_EDIT_RULE_DESC'" link type="primary" icon="EditPen" @click="handleEdit(scope.row)" />
          </px-tooltip>
          <px-tooltip content="删除" placement="top">
            <px-button v-has="'SYSTEM_BASE_RULE_DELETE_RULE_DESC'" link type="primary" icon="Delete" @click="handleDelete(scope.row)" />
          </px-tooltip>
        </template>
      </px-table-column>
    </px-table>
    <pagination
      v-show="paginationInfo.total > 0"
      v-model:page="paginationInfo.pageNum"
      v-model:limit="paginationInfo.pageSize"
      :total="paginationInfo.total"
      @pagination="getList"
    />
    <Drawer v-if="drawerVisible" :ruleId="ruleId" :type="type" @close="closeDrawer" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { PxMessageBox, PxMessage } from "px-ui";

import type { IRuleDescItem } from "@/api/system/runningStatusSetting/ruleDesc.ts";
import { getListForDesc, deleteRuleDesc, getListForRuleType } from "@/api/system/runningStatusSetting/ruleDesc";

import Drawer from "./Drawer.vue";
import type { PageType, ParamsFromForDesc } from "../../type";

const classNameList = JSON.parse(localStorage.getItem("classList"));

const form = ref<ParamsFromForDesc>({
  className: "",
  ruleTypeName: ""
});
const tableData = ref<IRuleDescItem[]>([]);
const type = ref<PageType>("add");
const ruleId = ref(null);
const drawerVisible = ref(false);
const paginationInfo = ref({
  pageNum: 1,
  pageSize: 20,
  total: 0
});
const formRef = ref(null);

if (classNameList.length === 1) {
  form.value.className = classNameList[0].code;
}

const handleAddRule = () => {
  ruleId.value = null;
  type.value = "add";
  drawerVisible.value = true;
};

const handleDetail = row => {
  ruleId.value = row.id;
  type.value = "detail";
  drawerVisible.value = true;
};

const handleEdit = row => {
  ruleId.value = row.id;
  type.value = "edit";
  drawerVisible.value = true;
};

const handleDelete = row => {
  PxMessageBox.confirm(`是否删除该设备运行状态规则说明？`, "提示", {
    confirmButtonText: "确认删除",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      await deleteRuleDesc(row.id);
      PxMessage.success("删除成功");
      getList();
    })
    .catch(() => {});
};

const handleReset = () => {
  formRef.value?.resetFields();
  getList();
};

const closeDrawer = (isShowConform: boolean = false) => {
  if (!isShowConform) {
    drawerVisible.value = false;
    getList();
    return;
  }
  PxMessageBox.confirm(`取消后您填写的内容将会丢失，请确认是否取消?`, "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(() => {
      drawerVisible.value = false;
      getList();
    })
    .catch(() => {});
};

const getList = async () => {
  const params = {
    ...form.value,
    pageNum: paginationInfo.value.pageNum,
    pageSize: paginationInfo.value.pageSize
  };
  const res = await getListForDesc(params);
  tableData.value = res.data;
  paginationInfo.value.total = res.total;
};

getList();
</script>

<style lang="scss" scoped>
@import url("../../scss/table-list.scss");
</style>
